<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
  <style>
    body {
      height: 2000px;
    }

    .contaienr {
      width: 500px;
      margin: 0 auto;
    }

    .contaienr::after {
      content: '';
      display: block;
      visibility: hidden;
      height: 0;
      clear: both;
    }

    .left {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
    }



    .left li {
      list-style: none;
      margin: 10px;
      background-color: green;
      cursor: pointer;
    }

    .left .active {
      background-color: pink;
    }

    .right {
      float: right;
      width: 300px;
    }

    .box {
      height: 300px;
      background-color: pink;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div class="contaienr">
    <div class="left">
      <ul>
        <li class="active">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
      </ul>
    </div>
    <div class="right">
      <div class="box">111</div>
      <div class="box">222</div>
      <div class="box">333</div>
      <div class="box">444</div>
    </div>
  </div>
  <script>
    //flag用于节阀流
    var flag = true;
    //监听滚动事件左边导航栏跟着右边内容走
    $(window).scroll(function () {
      //如果flag为true，才执行下面的操作
      if (flag) {
        $(".right .box").each(function (index, value) {
          if ($(window).scrollTop() >= $(value).offset().top) {
            $("li").eq(index).addClass("active").siblings().removeClass("active");
          }
        })
      }
    })
    //点击导航栏，右边内容跟着动
    $("li").click(function () {
      //点击后先让左边的滚动操作停止
      flag = false;
      $(this).addClass("active").siblings().removeClass("active");
      var top = $(".box").eq($(this).index()).offset().top;
      $("html,body").stop().animate({
        scrollTop: top
      }, function () {
        //动画完成后让左边的滚动操作开启
        flag = true;
      })
    })
  </script>
</body>

</html>